<template>
    <view class="Wrapper" :style="{ '--color': color }">
        <navBar :title="title"></navBar>
        <view class="Search" @click="ServerBtn">
            <view class="iconfont icon-btn_search size40"></view>
            <view class="lookServer">找服务</view>
            <!-- <input type="text" class="lookServer" @click="ServerBtn" disabled placeholder="找服务" placeholder-class="place" /> -->
        </view>
        <view class="content" :style="{ height: WrapperHeight }">
            <view class="LeftClass">
                <view class="List" :class="{ active: item.classify_id == classify_id }" v-for="(item, index) in sortClass" :key="index" @click="changeTab(item)">
                    {{ item.classify_name }}
                </view>
            </view>

            <view class="RightGoods">
                <scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" class="scrollView" :style="{ height: WrapperHeight }">
                    <view class="Box">
                        <view class="Li" @click="toListDetails(item)" v-for="(item, index) in pageData" :key="index">
                            <image :src="$imgUrls(item.img)" mode="aspectFill" class="Img"></image>
                            <text class="Name ellipsis">{{ item.name }}</text>
                        </view>
                    </view>
                    <emptys v-if="!pageData.length"></emptys>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                title: '服务',
                classify_id: '',
                sortClass: [],
                pageData: [],
                scrollTop: 0
            };
        },
        onLoad() {
            this.allUpList();
        },
        methods: {
            allUpList() {
                this.$http
                    .get({
                        url: '/singleSaleApi/allUpList',
                        data: {
                            classify_cate: 5
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.sortClass = result;
                        if (!this.sortClass.length) return;
                        this.classify_id = this.sortClass[0].classify_id;
                        this.sortClassGoods();
                    });
            },
            sortClassGoods() {
                this.$http
                    .get({
                        url: '/singleSaleApi/sortClassGoods',
                        data: {
                            classify_id: this.classify_id,
                            classify_cate: 5
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data.DataArr || [];
                        this.pageData = result;
                    });
            },
            toListDetails(Item) {
                this.toUrl(`/zunyi/details?goods_id=${Item.goods_id}`);
            },
            changeTab(Item) {
                this.scrollTop = 0;
                this.classify_id = Item.classify_id;
                this.sortClassGoods();
            },
            scroll(e) {
                this.scrollTop = e.detail.scrollTop;
            },
            ServerBtn() {
                this.toUrl(`searchServer`);
            }
        },
        computed: {
            ...mapState(['vid', 'color', 'System', 'totalHeight']),
            WrapperHeight() {
                return this.System.screenHeight - this.totalHeight - 60 + 'px';
            }
        }
    };
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .Search {
            width: 690rpx;
            height: 80rpx;
            background-color: #f7f7f7;
            border-radius: 40rpx;
            margin: 20rpx auto;
            padding: 0 20rpx;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: #c7c7c7;

            .lookServer {
                flex: 1;
                height: 100%;
                font-size: 26rpx;
                padding-left: 20rpx;
                display: flex;
                align-items: center;
            }
            .place {
                color: #c7c7c7;
            }
        }
        .content {
            width: 100%;

            display: flex;

            .LeftClass {
                width: 200rpx;
                height: 100%;
                background-color: #f6f6f6;
                margin-left: 4rpx;
                .List {
                    width: 100%;
                    height: 100rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 26rpx;
                    color: #666;
                    position: relative;
                }
                .active {
                    background-color: #ffffff !important;
                    position: relative;
                }
                .active::after {
                    content: '';
                    width: 2px;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: var(--color);
                    z-index: 10;
                }
            }

            .RightGoods {
                flex: 1;
                height: 100%;
                box-sizing: border-box;
                .scrollView {
                    width: 100%;

                    padding: 0 10rpx;
                    box-sizing: border-box;

                    .Box {
                        width: 100%;
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 40rpx 10rpx;
                        .Li {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            .Img {
                                width: 140rpx;
                                height: 140rpx;
                                border-radius: 8rpx;
                                overflow: hidden;
                            }
                            .Name {
                                font-size: 24rpx;
                                color: #999;
                                margin-top: 10rpx;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
